<template>
	<view class="top-na">
		<view class="left-nav">
			<image src="@/static/home/logo.png" class="logo" mode=""></image>
			<!-- 人数 -->
			<view class="people" @click="NPopuShowFun">
				<image src="@/static/nav/Group.png" class="people-icon" mode=""></image>
				<text class="people-text">{{dinersNumber}}</text>
				<image class="Vector" src="@/static/nav/Vector.png" mode=""></image>
			</view>
			<!-- <NumberOfPeople /> -->
			<!-- 呼叫服务员 -->
			<view class="call-v" @click="$u.throttle(callFun, 3000) ">
				<image class="call-image" src="@/static/nav/call/call.png" mode=""></image>
				<text class="call-t">{{$t("NavigationBar.CallAttendant")}}</text>
			</view>
			<!-- <call /> -->
		</view>

		<view class="rig">
			<!-- 搜索 -->
			<!-- <nav-search /> -->
			<!-- 桌号 -->
			
			<view class="tab" @click="outUser">
				<text>{{$t("NavigationBar.TableNumber")}}：{{deName}}</text>
				<image src="@/static/nav/exit/exit.png" mode=""></image>
			</view>
			<!-- <table-number /> -->
			<!-- 语言 -->
			<view class="search" @click="lagFun">
				<text>{{$t("NavigationBar.Langue")}}</text>
				<image src="@/static/nav/xl.png" class="search-img" mode=""></image>
			</view>
			<!-- <language /> -->

			<view class="search">
				<text>{{version || '--'}}</text>
			</view>

		</view>





	</view>
</template>

<script>
	import NumberOfPeople from "./topNav/NumberOfPeople"
	import call from "./call"
	import navSearch from "./topNav/navSearch"
	import TableNumber from "./topNav/TableNumber"
	import language from "./topNav/language"

	export default {
		components: {
			NumberOfPeople,
			call,
			navSearch,
			TableNumber,
			language,
		},
		name: "topNavigation",
		data() {
			return {
				show: false,
				dinersNumber:uni.getStorageSync('dinersNumber'),
				version:uni.getStorageSync('version'),
			};
		},
		mounted(){
			// 更新用餐人数
			this.bus.$on('NumberPeoplePopuRenew',(i)=>{
				this.dinersNumber = i
			})
		},
		computed: {
			deName() {
				return this.getDeName()
			},
		},
		methods:{


			NPopuShowFun(){
				this.bus.$emit('NumberPeoplePopuShowFun')
			},
			callFun() {
				this.$emit('openCallPopu')
				// this.bus.$emit('SendMessage',{
				// 	message: '呼叫服务员',
				// 	from: this.getDeName(),
				// 	to: 'admin'
				// })
				// addDish().then((res) => {
				// 	this.showToast('呼叫成功！')
				// })
			},
			outUser() {
				this.showAlert('是否退出登录？').then(() => {
					uni.clearStorage()
					uni.reLaunch({
						url: '/pages/login/index'
					})
				})
			},
			lagFun(){
				this.bus.$emit('lagShow',true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-na {
		padding: 10px 30px;
		display: flex;
		background: $qy-bg-nav-color;
		position: fixed;
		top: 0%;
		width: 100%;
		box-sizing: border-box;
		z-index: 99;

		// z-index: 9;
		.logo {
			width: 84px;
			height: 32px;
		}

		.left-nav {
			display: flex;
			flex: 1;
		}

		.rig {
			display: flex;

		}

		.search {
			padding: 8px 10px;
			display: flex;
			border-radius: 10px;
			align-items: center;
			background-color: $qy-bg-nav-option-color;
			margin-left: 16px;

			text {
				color: $uni-text-color;
				font-size: 14px;
			}

			.search-img {
				width: 9px;
				height: 5.3px;
				margin-left: 6px;
			}
		}

	}
	.people {
		padding: 8px 10px;
		display: flex;
		border-radius: 10px;
		align-items: center;
		background-color: $qy-bg-nav-option-color;
		margin-left: 62px;
		.people-icon {
			width: 17.3px;
			height: 16.2px;
		}
	
		.people-text {
			color: $qy-text-color-title;
			margin-left: 8px;
			font-size: 14px;
		}
		.Vector {
			width: 9.33px;
			height: 9.33px;
			margin-left: 8px;
	
		}
	}
	.call-v {
		margin-left: 16px;
		background-color: $qy-bg-nav-option-color;
		padding: 8px 10px;
		display: flex;
		border-radius: 10px;
	
		.call-image {
			width: 20px;
			height: 20px;
		}
	
		.call-t {
			margin-left: 6px;
			color: $uni-text-color;
			font-size: 14px;
		}
	
	}
	.tab {
		padding: 8px 10px;
		display: flex;
		border-radius: 10px;
		align-items: center;
		background-color: $qy-bg-nav-option-color;
		margin-left: 16px;
	
		text {
			color: $uni-text-color;
			margin-left: 8px;
			font-size: 14px;
		}
	
		image {
			width: 16px;
			height: 16px;
			margin-left: 7px;
		}
	}
	.search {
		padding: 8px 10px;
		display: flex;
		border-radius: 10px;
		align-items: center;
		background-color: $qy-bg-nav-option-color;
		margin-left: 16px;
		text {
			color: $uni-text-color;
			font-size: 14px;
		}
		.search-img{
			width: 9px;
			height: 5.3px;
			margin-left: 6px;
		}
	}
</style>